<template>
  <PublicPage :showHead="false">
    <view class="shopDetails_box">
      <template slot="content">
        <!-- 自定义导航栏 -->
          <view class="nav-wrap" :class="{'nav-background':scrollTop>60}" :style="[navStyle]">
            <!-- 返回首页按钮图片 -->
            <image
                v-if="routeLength<=1"
                src="@/static/image/goHome_con.png"
                alt="icon"
                class="back-icon-home"
                @click.stop="_handleBack(0)"
            />
            <!-- 返回上一页按钮图片 -->
            <image
                v-else
                src="@/static/image/navBack_icon.png"
                alt="icon"
                class="back-icon"
                @click.stop="_handleBack(1)"
            />
            <!-- 搜索图标 -->
            <view v-if="scrollTop>=searchScroll" class="nav-search" @click.stop="_handleSearch">
              <i class="iconfont icon-search" />
            </view>
          </view>
          <view class="shopDetails_layout">
            <!-- 背景图片 -->
            <view class="shop_bg_box">
              <image
                :src="infoData.backgroundUrl||'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/bgImg/user_bg_img.png'"
                mode="aspectFill"
                class="bg_image"
              />
            </view>
            <view class="shopUser_msg_box u-flex">
              <view class="shopUser_head" @click.stop="navigateTo({url: `/pagesB/personalCenter/homePage?accountId=${infoData.accountId}`})">
                <image
                  :src="infoData.communityLogo||'https://image.qqpyyds.com/mpAppImg/icon/avatar2_icon.png'"
                  mode="aspectFill"
                  class="head_image"
                />
              </view>
              <view class="shopUser_con">
                <view class="shopUser_name fz-18 u-m-b-8">{{infoData.communityName}}</view>
                <view class="shopUser_data">
                  <text class="u-m-r-24 viceColorN3 fz-12">成员 {{playvolumeFn(infoData.memberCount) || 0}}</text>
                  <text class="viceColorN3 fz-12">跟团人次 {{playvolumeFn(infoData.followGroupCount) || 0}}</text>
              </view>
              </view>
            </view>
          </view>
      </template>
      <view class="selectGoods_box">
        <!-- 商品 -->
        <SelectGoods v-if="loadSelectGoods" :infoData="infoData" />
      </view>
    </view>
  </PublicPage>
</template>
<script>
import PublicPage from "@/components/publicPage/index.vue"
import SelectGoods from "../goods/selectGoods.vue";

import User from '@/api/user.js'
import Util from "@/api/util.js"
export default {
  components: {
    PublicPage,
    SelectGoods
  },
  data () {
    return {
      routeData: {}, // url参数
      infoData: {}, // 店主信息
      loadSelectGoods: false,
    }
  },
  computed: {
    // 自定义导航栏样式
    navStyle() {
      const { navHeight, navTop, menuButtonObject } = this.$store.state.globalData
      const paddingBottom = navHeight - menuButtonObject.height - navTop
      const paddingRight = menuButtonObject.width + 14
      const style = {
        height: `${navHeight}px`,
        padding: `${navTop}px ${paddingRight}px ${paddingBottom}px 12px`,
      }
      return style
    },
    // 路由历史长度
    routeLength() {
      return getCurrentPages().length
    }
  },
  onLoad (r) {
    this.routeData = r
    this.getInfoData()
  },
  methods: {
    // 获取社群主页用户信息
    async getInfoData() {
      const res = await User.getOthersInfo({accountId: this.routeData.accountId})
      this.infoData = res.data
      this.loadSelectGoods = true // 拿到用户信息在显示商品列表
    },
    _handleBack(type) {
      switch (type) {
        case 0:
          this.switchTab({ url: '/pages/index/index' })
          break
        case 1:
          if (this.routeLength === 1) {
            this.switchTab({ url: '/pages/index/index' })
          } else {
            this.navigateBack({ delta: 1 })
          }
      }
    },
    playvolumeFn (mun) { // 处理数据过万的显示
      return Util.playvolume(mun)
    },
  }
}
</script>
<style lang="scss" scoped>
.nav-wrap {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: transparent;
  &.nav-background {
    background-color: #ffffff;
  }
  .back-icon {
    width: 40rpx;
    height: 40rpx;
    margin-left: 20rpx;
    background-size: cover;
    z-index: 9;
  }
  .back-icon-home {
    width: 60rpx;
    height: 60rpx;
    margin-left: 20rpx;
    background-size: cover;
    z-index: 9;
  }
  .nav-search {
    width: 48rpx;
    height: 48rpx;
    border-radius: 24rpx;
    line-height: 48rpx;
    text-align: center;
    color: #333333;
    background-color: $n2Color;
  }
}
.shopDetails_box {
  height: 100%;
}
.selectGoods_box {
  height: calc(100% - 376rpx);
}
.shopDetails_layout {
  position: relative;
  border-radius: 0 0 32rpx 32rpx;
  overflow: hidden;
  .shop_bg_box {
    width: 100%;
    height: 376rpx;
    .bg_image {
      width: 100%;
      height: 100%;
    }
  }
  .shopUser_msg_box {
    position: absolute;
    width: 100%;
    padding: 32rpx;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
    flex: 1;
    .shopUser_head {
      width: 160rpx;
      height: 160rpx;
      border: 2rpx solid #FFF;
      box-sizing: border-box;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 24rpx;
      flex: 0 0 auto;
      .head_image {
        width: 100%;
        height: 100%;
      }
    }
    .shopUser_con {
      width: 496rpx;
      color: #fff;
      .shopUser_name {
        width: 100%;
        height: 48rpx;
        line-height: 48rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap !important;
      }
    }
  }
}
</style>